import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Tabs, Table, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  fetchStores,
} from '@/services/platform/check'
import { router } from 'umi'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const tabs = [{
  name: '待审核',
  status: null,
}, {
  name: '已审核',
  status: '1'
}, {
  name: '未通过',
  status: '3'
}]
const { TabPane } = Tabs;
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '门店名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '行业',
    dataIndex: 'parentCatName',
    key: 'parentCatName',
  },
  {
    title: '所在城市',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '联系人',
    dataIndex: 'contactPerson',
    key: 'contactPerson',
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '申请时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: (t) => <>{t == 1 ? '正常' : '冻结'}</>
  },
];

const Store = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])
  const [total, setTotal] = useState(null)
  const [key, setKey] = useState(null)
  const [record, setRecord] = useState(null)

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await fetchStores(params)
    setData(res.data)
    setTotal(res.total)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <>
        <Col span={8}>
          <Form.Item label={`名称`}>
            {getFieldDecorator(`name`, {})
              (<Input />)}
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={`门店行业分类`}>
            {getFieldDecorator(`parentCatId`, {})
              (<Input />)}
          </Form.Item>
        </Col>
      </>
    )
  }

  const changeTabs = (key) => {
    setKey(key)
    key == 'null' ?
    init() :
    init({
      status: key
    })
  }
  // 按钮处理
  const handleBtn = type => {
    if (type != 1 && !record) return message.warning('请至少选择一项')
    switch (type) {
      case 3:
        return router.push({
          pathname: '/platform/check/storeDetails',
          query: {
            id: record[0].id,
          },
        })
    
      default:
        break;
    }
  }
  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setRecord(selectedRows)
    },
  };
  const pagination = {
    total: parseInt(total),
    onChange(page) {
      init({
        pageNo: page,
        pageSize: 10,
        status: key,
      })
    }
  }  

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Tabs onChange={changeTabs}>
        {
          tabs.map((t, i) => 
            <TabPane tab={t.name} key={t.status}>
              <Table 
                columns={columns}
                dataSource={data}
                rowSelection={rowSelection}
                pagination={pagination}
                rowKey={record => record.id}
              />
            </TabPane>  
          )
        }
      </Tabs>
    </PageHeaderWrapper>
    )
}

export default Form.create()(Store)
